<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        class="formBox"
        label-width="90px"
      >
        <el-form-item label="学院：" prop="collegeId">
          <el-select
            v-model="queryParams.collegeId"
            placeholder="请选择学院"
            style="width: 100%"
            @change="getCollegeModeListFun"
          >
            <el-option
              v-for="(item, index) in getSchoolCollegeListData"
              :label="item.collegeName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模式：" prop="modelId">
          <el-select
            v-model="queryParams.modelId"
            placeholder="请选择模式"
            style="width: 100%"
            @change="getCollegeMajorListFun"
          >
            <el-option
              v-for="(item, index) in getCollegeModeListData"
              :label="item.modelName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称：" prop="majorId">
          <el-select
            v-model="queryParams.majorId"
            placeholder="请选择专业名称"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in getCollegeMajorListData"
              :label="item.majorName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="closeStatus">
          <el-select v-model="queryParams.closeStatus" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="停用" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 按钮 -->
    <el-card class="box-card" style="margin-top: 10px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="buttonMethod(1)"
            v-hasPermi="['charge:feeStandardsProject:chargeProject:add']"
            >添加
          </el-button>
        </el-col>

        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-card>
    <!-- 列表 -->
    <el-card class="table-card" style="margin-top: 10px">
      <el-table :data="dataList" stripe border>
        <el-table-column label="收费学年" prop="feeYear" width="140" fixed="left" />
        <el-table-column label="学院" prop="collegeName" width="140" />
        <el-table-column label="模式" prop="modelName" width="140" />
        <el-table-column label="专业名称" prop="majorName" width="140" />
        <el-table-column label="年级" prop="gradeName" />
        <el-table-column
          v-for="(item, index) in headList"
          :label="item.value + '(元)'"
          :key="index"
          :prop="item.key"
          width="140"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.closeStatus == '1'">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.closeStatus == '2'">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="系统生成账单状态" width="140">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.generateStatus == '1'">已生成</el-tag>
            <el-tag type="danger" v-if="scope.row.generateStatus == '2'">未生成</el-tag>
            <el-tag type="warning" v-if="scope.row.generateStatus == '3'">生成中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="140" />
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(1, scope.row)"
              v-hasPermi="['charge:feeStandardsProject:chargeProject:edit']"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(4, scope.row)"
              v-if="scope.row.closeStatus == '1'"
              v-hasPermi="['charge:feeStandardsProject:chargeProject:ty']"
              >停用
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(4, scope.row)"
              v-if="scope.row.closeStatus == '2'"
              v-hasPermi="['charge:feeStandardsProject:chargeProject:ty']"
              >启用
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(5, scope.row)"
              v-if="scope.row.generateStatus == '2'"
              v-hasPermi="['charge:feeStandardsProject:chargeProject:generateBill']"
              >生成账单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 添加、编辑 -->
    <el-dialog :title="title" :visible.sync="status" width="70%">
      <el-form label-width="120px" label-position="right" size="small" class="formBox">
        <el-row class="mb_10">
          <el-col :span="12">
            <el-form-item label="收费学年：" class="is-required">
              <el-select
                v-model="queryForm.feeYearId"
                placeholder="请选择收费学年"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getSchoolFeeYearListData"
                  :label="item.feeYear"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院：" class="is-required">
              <el-select
                v-model="queryForm.collegeId"
                placeholder="请选择学院"
                style="width: 100%"
                @change="getCollegeModeListFun"
              >
                <el-option
                  v-for="(item, index) in getSchoolCollegeListData"
                  :label="item.collegeName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模式：" class="is-required">
              <el-select
                v-model="queryForm.modelId"
                placeholder="请选择模式"
                style="width: 100%"
                @change="getCollegeMajorListFun"
              >
                <el-option
                  v-for="(item, index) in getCollegeModeListData"
                  :label="item.modelName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业名称：" class="is-required">
              <el-select
                v-model="queryForm.majorId"
                placeholder="请选择专业名称"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getCollegeMajorListData"
                  :label="item.majorName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学制：" class="is-required">
              <el-select
                v-model="queryForm.studyPeriod"
                placeholder="请选择学制"
                style="width: 100%"
              >
                <el-option label="6年" value="6" />
                <el-option label="5年" value="5" />
                <el-option label="4年" value="4" />
                <el-option label="3年" value="3" />
                <el-option label="2年" value="2" />
                <el-option label="1年" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级：" class="is-required">
              <el-select
                v-model="queryForm.gradeId"
                placeholder="请选择年级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getSchoolGradeListData"
                  :label="item.grade"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-for="(item, index) in payFeeItemConfigGetListData"
            :key="index"
          >
            <el-form-item
              :label="item.feeItemConfigName + '：'"
              :class="item.mandatoryStatus == 1 ? 'is-required' : ''"
            >
              <el-input
                v-model="item.itemPrice"
                :placeholder="'请输入' + item.feeItemConfigName"
                @blur="itemPriceBlur(item, index)"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" class="is-required">
              <el-radio-group v-model="queryForm.closeStatus">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="queryForm.remark"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buttonMethod(2)">取 消</el-button>
        <el-button type="primary" @click="buttonMethod(3)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  payStandardFeeItemListHead,
  payStandardFeeItemList,
  payStandardFeeItemOpen,
  payStandardFeeItemClose,
  payStandardFeeItemGenerateBill,
  payFeeItemConfigGetList,
  payStandardFeeItem,
  payStandardFeeItemPut,
  payStandardFeeItemDetail,
} from "@/api/charge/bo";
import {
  getSchoolFeeYearList,
  getSchoolCollegeList,
  getCollegeMajorList,
  getCollegeModeList,
  getSchoolGradeList,
} from "@/api/educational";
import r from "highlight.js/lib/languages/r";
export default {
  name: "",
  data() {
    return {
      status: false,
      export_status: false,
      title: "",
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        collegeId: null,
        modelId: null,
        majorId: null,
        closeStatus: null,
      },
      queryForm: {},
      total: 0,
      showSearch: true,
      date: [],
      headList: [],
      getSchoolFeeYearListData: [], //学校收费学年管理接口 查询学校收费信息列表（不分页）
      getSchoolCollegeListData: [], //学院信息管理接口 查询学院信息列表（不分页）
      getCollegeModeListData: [], //学院模式管理接口 查询模式信息列表（不分页）
      getCollegeMajorListData: [], //专业管理接口 查询专业信息列表（不分页）
      getSchoolGradeListData: [], //学校年级管理接口 查询学校年级信息列表（不分页）
      payFeeItemConfigGetListData: [], //收费配置--不分页，查询所有数据
    };
  },
  created() {
    this.payStandardFeeItemListHeadFun(); //表格头部数据
    this.getSchoolFeeYearListFun(); //学校收费学年管理接口 查询学校收费信息列表（不分页）
    this.getSchoolCollegeListFun(); //学院信息管理接口 查询学院信息列表（不分页）
    this.getSchoolGradeListFun(); //学校年级管理接口 查询学校年级信息列表（不分页）
    this.payFeeItemConfigGetListFun(); //收费配置--不分页，查询所有
    this.getList(); //列表
  },
  methods: {
    // 学校收费学年管理接口 查询学校收费信息列表（不分页）
    getSchoolFeeYearListFun() {
      getSchoolFeeYearList().then((res) => {
        if (res.code == 200) {
          this.getSchoolFeeYearListData = res.data;
        }
      });
    },
    // 学院信息管理接口 查询学院信息列表（不分页）
    getSchoolCollegeListFun() {
      getSchoolCollegeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolCollegeListData = res.data;
        }
      });
    },
    // 学院模式管理接口 查询模式信息列表（不分页）
    getCollegeModeListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "modelId", "");
        this.$set(this.queryForm, "modelId", "");
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      getCollegeModeList({
        collegeId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeModeListData = res.data;
        }
      });
    },
    // 专业管理接口 查询专业信息列表（不分页）
    getCollegeMajorListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      getCollegeMajorList({
        modelId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeMajorListData = res.data;
        }
      });
    },
    // 学校年级管理接口 查询学校年级信息列表（不分页）
    getSchoolGradeListFun() {
      getSchoolGradeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolGradeListData = res.data;
        }
      });
    },
    // 获取列表数据
    getList() {
      var data = this.queryParams;
      console.log(data);
      payStandardFeeItemList(data).then((res) => {
        if (res.code == 200) {
          this.dataList = res.rows;
          this.total = res.total;
        }
      });
    },
    // head 头部数据
    payStandardFeeItemListHeadFun() {
      payStandardFeeItemListHead().then((res) => {
        if (res.code == 200) {
          this.headList = res.data;
        }
      });
    },
    payFeeItemConfigGetListFun() {
      payFeeItemConfigGetList().then((res) => {
        if (res.code == 200) {
          var arr = [];
          res.data.forEach((item) => {
            arr.push({
              feeItemConfigId: item.id,
              feeItemConfigName: item.itemName,
              mandatoryStatus: item.mandatoryStatus,
              itemPrice: 0,
            });
          });
          this.payFeeItemConfigGetListData = arr;
          this.$set(this, "this.payFeeItemConfigGetListData", arr);
        }
      });
    },
    payFeeItemConfigGetListFun_2(options) {
      payFeeItemConfigGetList().then((res) => {
        if (res.code == 200) {
          var list = res.data;

          list.forEach((item, index) => {
            options.forEach((item1, index1) => {
              if (item.id == item1.feeItemConfigId) {
                item.feeItemConfigId = item1.feeItemConfigId;
                item.feeItemConfigName = item1.feeItemConfigName;
                item.itemPrice = item1.itemPrice;
              }
            });
          });

          var arr = [];
          list.forEach((item) => {
            arr.push({
              feeItemConfigId: item.feeItemConfigId ? item.feeItemConfigId : item.id,
              feeItemConfigName: item.feeItemConfigName?item.feeItemConfigName:item.itemName,
              mandatoryStatus: item.mandatoryStatus,
              itemPrice: item.itemPrice?item.itemPrice:0,
            });
          });
          this.payFeeItemConfigGetListData = arr;
          this.$set(this, "this.payFeeItemConfigGetListData", arr);
        }
      });
    },
    payFeeItemConfigGetListFun_copy() {
      var that = this;
      payFeeItemConfigGetList().then((res) => {
        if (res.code == 200) {
          var arr = [];
          res.data.forEach((item) => {
            arr.push({
              feeItemConfigId: item.id,
              feeItemConfigName: item.itemName,
              mandatoryStatus: item.mandatoryStatus,
              itemPrice: 0,
            });
          });
          that.payFeeItemConfigGetListData = arr;
          that.$set(that, "this.payFeeItemConfigGetListData", arr);
          that.title = "添加项目标准收费";
          that.status = true;
        }
      });
    },
    itemPriceBlur(item, index) {
      var itemPrice =
        item.itemPrice
          .replace(/[^/0-9.]/g, "")
          .replace(/(\.d+)\.+/g, "$1")
          .replace(/(\..*)\./g, "$1")
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
      item.itemPrice = itemPrice * 1;
    },
    /**按钮点击事件处理方法*/
    buttonMethod(options, value) {
      //options 等于 1
      if (options == 1) {
        if (value) {
          this.queryForm = value;
          this.title = "修改项目标准收费";
          payStandardFeeItemDetail(value.id).then((res) => {
            if (res.code == 200) {
              this.getCollegeModeListFun(res.data.collegeId, true);
              this.getCollegeMajorListFun(res.data.modelId, true);
              this.payFeeItemConfigGetListFun_2(res.data.details);
              this.status = true;
            }
          });
        } else {
          this.queryForm = {};

          this.getCollegeModeListData = [];
          this.getCollegeMajorListData = [];
          this.payFeeItemConfigGetListFun_copy();
        }
      }
      //options 等于 2 关闭弹窗
      else if (options == 2) {
        this.queryForm = {};
        this.title = "";
        this.status = false;
        this.export_status = false;
      }
      //options 等于 添加
      else if (options == 3) {
        var data = this.queryForm;
        if (!data.feeYearId) {
          return this.$message.error("收费学年不能为空");
        }
        if (!data.collegeId) {
          return this.$message.error("学院不能为空");
        }
        if (!data.modelId) {
          return this.$message.error("模式不能为空");
        }
        if (!data.majorId) {
          return this.$message.error("专业不能为空");
        }
        if (!data.studyPeriod) {
          return this.$message.error("学制不能为空");
        }
        if (!data.gradeId) {
          return this.$message.error("年级不能为空");
        }
        if (!data.closeStatus) {
          return this.$message.error("是否启用不能为空");
        }
        var status = true;
        this.payFeeItemConfigGetListData.forEach((item) => {
          item.itemPrice = item.itemPrice + "";
          if (!item.itemPrice) {
            status = false;
            return this.$message.error(item.feeItemConfigName + "不能为空");
          }
        });
        if (status == true) {
          data.details = this.payFeeItemConfigGetListData;
          if (data.id) {
            payStandardFeeItemPut(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.resetQuery();
                this.status = false;
              } else {
                that.$message.error(res.msg);
              }
            });
          } else {
            payStandardFeeItem(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.resetQuery();
                this.status = false;
              } else {
                that.$message.error(res.msg);
              }
            });
          }
        }
      }
      //
      else if (options == 4) {
        if (value.closeStatus == "1") {
          payStandardFeeItemClose(value.id).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.resetQuery();
            } else {
              that.$message.error(res.msg);
            }
          });
        }
        // 开启
        else if (value.closeStatus == "2") {
          payStandardFeeItemOpen(value.id).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.resetQuery();
            } else {
              that.$message.error(res.msg);
            }
          });
        }
      }
      // 5
      else if (options == 5) {
        this.$confirm("确定生成" + value.feeYear + "收费学年的账单吗？", "生成账单", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            payStandardFeeItemGenerateBill(value.id).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch(() => {});
      }
    },
    /** 处理查询请求  将查询参数中的页码重置为1，并调用getList方法获取列表数据 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**重置查询表单并重新执行查询操作*/
    resetQuery() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        collegeId: null,
        modelId: null,
        majorId: null,
        closeStatus: null,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**处理导出操作*/
    handleExport() {
      this.download(
        "agents/agents/export",
        {
          ...this.queryParams,
        },
        `学校校区管理.xlsx`
      );
    },
    handleSelectionChange(options) {
      this.roleIds = options.map((item) => item.id);
      console.log(this.roleIds, "options");
    },
  },
};
</script>
<style scoped>
.width_100 {
  width: 100%;
}
</style>
